<template>

  <div class='app-container'>
    <el-row :gutter='10'>
      <el-col :xl='4' :lg='6' :md='6' :sm='24' :xs='24'>
        <el-aside>
          <el-input
            v-model='filterText'
            placeholder='请输入关键字'
            prefix-icon='el-icon-search'
            clearable
            size='mini'
          />
          <el-tree
            ref='tree'
            :data='treeData'
            class='filter-tree'
            :props='defaultProps'
            :highlight-current='true'
            node-key='id'
            :show-checkbox='isCheck'
            :expand-on-click-node='false'
            :current-node-key='currentKey'
            :default-checked-keys='defaultTree'
            :default-expanded-keys='defaultExpanded'
            :filter-node-method='filterNode'
            @current-change='getNowTree'
          >
            <span slot-scope='{ node, data }' class='custom-tree-node'>
              <span>
                <img v-if='data.level ==1' src='@/assets/G1.png'>
                <img v-else-if='data.level ==2' src='@/assets/G2.png'>
                <img v-else-if='data.level ==3' src='@/assets/G3.png'>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </el-aside>
      </el-col>
      <el-col :xl='20' :lg='18' :md='18' :sm='24' :xs='24'>
        <div class='rightMain'>
          <component :is='moduleType' ref='child' :chose-data='choseTreeItem' />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>

// 能效分析
import electricityComparison from '@/views/efficiencyAnalysis/component/electricityComparisonChild.vue'
import powerRanking from '@/views/efficiencyAnalysis/component/powerRankingChild.vue'
import indexCorrelation from '@/views/efficiencyAnalysis/component/indexCorrelationChild.vue'
import powerQuality from '@/views/efficiencyAnalysis/component/powerQualityChild.vue'
import electricAnalysis from '@/views/efficiencyAnalysis/component/electricAnalysisChild.vue'
import contentChild from '@/views/realtimeControl/electricityParameters/components/content.vue'

import transformerChild from '@/views/pointEquipment/transformer/components/content.vue'
import surroundingsChild from '@/views/realtimeControl/surroundings/components/content.vue'
import firefightingChild from '@/views/realtimeControl/firefighting/components/content.vue'
import carbonStatistics from '@/views/efficiencyAnalysis/component/carbonStatisticsChild.vue'
import demandAnalysis from '@/views/efficiencyAnalysis/component/demandAnalysisChild.vue'
// 报表管理
import electricityReport from '@/views/reportManagement/component/electricityReportChild.vue'
import { treeData } from '../../api/commonApi'

export default {
  name: 'index',
  components: {
    carbonStatistics,
    demandAnalysis,
    electricityComparison,
    powerRanking,
    indexCorrelation,
    powerQuality,
    electricAnalysis,
    contentChild,
    surroundingsChild,
    firefightingChild,
    electricityReport,
    transformerChild,
  },

  props: {
    showModel: {
      type: Boolean,
      default: false,
    },
    moduleType: {
      type: String,
      default: '',
    },
    // 参数
    params: {
      type: Object,
      default: () => {
        return { id: null, level: '3' }
      },
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      type: 1, // 1: 电相关数据， 2: 温湿度相关数据
      flag: 1, // 1: 查三层树形结构， 2: 查两层树形结构
      treeData: [], // 树形结构数据
      defaultExpanded: [],
      currentKey: null,
      defaultTree: [],
      choseTreeItem: {
        camera: null,
        camera_id: null,
        device_group: null,
        device_type: null,
        device_typename: null,
        flag: null,
        group_name: null,
        id: null,
        name: null,
        site_id: null,
        site_name: null,
      },
      height: '0px',
      filterText: null,
      defaultProps: {
        children: 'child',
        label: 'name',
        isLeaf: 'leaf',
      },
    }
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
  },
  mounted() {
    this.getHeight()
    if (this.$route.path === '/reportManagement/electricityFeesReport') {
      this.flag = 2
    }
    if (this.$route.path === '/realtimeControl/surroundings') {
      this.type = 2
    }
    this.getTreeData()
  },
  methods: {
    getHeight() {
      this.height = window.getComputedStyle(
        document.querySelector('.app-main'),
      ).height
      if (this.$route.path.indexOf('/reportManagement') === -1) {
        this.height = parseInt(this.height) + 'px'
      } else {
        this.height = (parseInt(this.height) - 87) + 'px'
      }
      console.log('height', this.height)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getNowTree() {
      // 不是第三级数据不进行操作， 如果有的页面只需要二级数据， 可以对路由进行判断(this.$route.path)把判断条件改成arguments[1].level === 2
      if (this.$route.path === '/reportManagement/electricityFeesReport') {
        if (arguments[1].level === 2) {
          this.choseTreeItem = arguments[0]
        }
      } else {
        if (arguments[1].level === 3) {
          this.choseTreeItem = arguments[0]
        }
      }

      if (this.moduleType === 'electricityComparison' || this.moduleType === 'powerRanking') {
        // 延迟执行 确保参数传递到 子组件
        setTimeout(() => {
          this.$refs.child.changeChoseData()
        }, 100)
      }
    },
    getTreeData() {
      treeData({
        type: this.type,
        flag: this.flag,
        monitor_type: this.params.id ?? null,
      }).then((res) => {
        this.treeData = res.data.list
        // 默认展开第一个节点数据
        if (this.treeData.length > 0) {
          // 有第一级数据
          this.defaultExpanded[0] = this.treeData[0].id
          this.defaultTree[0] = this.treeData[0].id
          if (this.treeData[0].child.length > 0) {
            // 有第二级数据
            this.defaultExpanded[1] = this.treeData[0].child[0].id
            this.defaultTree[1] = this.treeData[0].child[0].id
            this.currentKey = this.treeData[0].child[0].id
            //  有第三级数据, 如果有的页面只需要二级数据， 可以对路由进行判断(this.$route.path)在此处return
            if (this.treeData[0].child[0].child && this.treeData[0].child[0].child.length > 0) {
              this.defaultExpanded[2] = this.treeData[0].child[0].child[0].id
              this.defaultTree[2] = this.treeData[0].child[0].child[0].id
              this.currentKey = this.treeData[0].child[0].child[0].id
              // 执行传递参数方法
              this.choseTreeItem = this.treeData[0].child[0].child[0]
            }
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentKey)
              if (this.moduleType === 'electricityComparison') {
                this.$refs.child.changeChoseData()
              }
            })
          }
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.app-main {
  min-height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.appMainPadding0 {
  padding-top: 30px !important;
}

.fixed-header + .app-main {
  padding-top: 85px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>

<style lang='scss' scoped>
.el-container {
  height: 100%;
  width: 100%;
}

.box {
  position: relative;
  box-sizing: border-box;

  .nav {
    position: absolute;
    top: 0px;
    left: calc(12.8% + 19px);
    width: 84%;
    box-sizing: border-box;
    z-index: 1999;
  }
}

.el-aside {
  width: 100% !important;
  height: 100% !important;
  //background-color: #ffffff;
}

.el-tree {
  background-color: transparent;
  font-size: 12px;
}

.rightMain {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

.el-tree-node.is-current > .el-tree-node__content {
  background-color: #1890ff !important;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
